<template>
  <ul style="padding-left: 20px">
    <!-- vue事件修饰符，可以取消冒泡 -->
    <template v-for="(item, index) in list" :key="index">
      <li v-show="item.show" @click.stop="handleItemClick(item)">
        <p>{{ item.name }}</p>
        <!-- 组件内部自己调用自己，递归使用 -->
        <tree-menus v-if="item.children" :list="item.children"></tree-menus>
      </li>
    </template>
  </ul>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { TreeArrayType } from '@/views/tree-view/tree.d'
export default defineComponent({
  props: ['list'],
  setup() {
    const state = reactive({})

    const handleItemClick = (item: TreeArrayType) => {
      console.log(item.name, 'item-------item')
      if (item.children) {
        item.children.forEach((v: any) => {
          v.show = !v.show
        })
      }
    }

    return { state, handleItemClick }
  }
})
</script>
